<template>
	<view class="contain" :style="{ paddingTop: setmargintop() + 'px' }">
		<view class="new-top-nav">
			<uni-nav-bar title="政策意见详情" backgroundColor="#fff" color="#000" statusBar="true"
				@clickLeft="back()" left-icon="arrowleft"></uni-nav-bar>
		</view>
		<view class="new-header">
			<view class="line">
				<view class="one">索引号</view>
				<view class="one">{{ article.policy && article.policy.indexNumber }}</view>
				<view class="one">政策分类</view>
				<view class="one">{{ policyTypeName }}</view>
			</view>
			<view class="line">
				<view class="one">解读机关</view>
				<view class="one">{{ article.department }}</view>
				<view class="one">成文日期</view>
				<view class="one">{{ article.createTime }}</view>
			</view>
		</view>
		<view class="contain-view" :style="{height:setcollapseheight() + 'px'}">
			<view class="title">
				{{ article.title }}
			</view>
			
			<view class="poster">
				<view class="post">解读单位：{{ article.department }}</view>
				<view class="post">发布日期：{{ article.createTime }}</view>
			</view>
			
			<view class="content">
				<view v-html="article.content"></view>
				
				<view class="fileBox">
					<view class="fileTitle">附件：</view>
					<view class="fileContent">
						<view class="fileOne" v-for="item,index in article.filesList" :key="index" @click="download(item)">
							{{ index + 1 }}、 {{ item.fileName }}
						</view>
					</view>
				</view>
			
				<view class="num">
					<uni-icons type="eye" :color="'#ffbb41'" size="25" class="eyeicon" />
					浏览量: {{ article.pageView }}
				</view>
				
				<template v-if="article.openComment">
					<!-- 评论 @click="toReplay(item.user)" -->
					<view class="publish" v-for="(item,index) in communicationList" :key="index">
						<view class="publishuser">
							<view class="left">
								<view class="icon">
									<image src="@/static/index-message/jingliren.png" mode=""></image>
								</view>
								<view class="name">
									{{ item.senderName }}
								</view>
							</view>
							<view class="right">
								{{ item.timestamp }}
							</view>
						</view>
						<view class="publishcontent">
							<view class="method" v-html="item.commentContent">
							</view>
						</view>
						
						<!-- <view class="sub-publishuser">
							<view class="publish" v-for="(ite,i) in item.children" :key="`sub${i}`" >
								<view class="publishuser" @click="toReplay(ite.user)">
									<view class="left">
										<view class="icon">
											<image src="@/static/index-message/jingliren.png" mode=""></image>
										</view>
										<view class="name">
											<view class="to">{{ ite.user }}</view>
											<view class="to">@</view>
											<view class="replay">
												{{ ite.replay }}
											</view>
										</view>
									</view>
									<view class="right">
										{{ ite.createTime }}
									</view>
								</view>
								<view class="publishcontent">
									<view class="method">
										{{ ite.exchangeContent }}
									</view>
								</view>
							</view>
						</view> -->
					</view>
				</template>
			</view>
		</view>
		
		<!-- 发布评论 -->
		<view class="replay" v-if="article.openComment">
			<u-button class="btn" color="#0480FB" type="primary" style="border-radius: 114rpx;"
				@click="toReplay()" size="mini" text="发布评论"></u-button>
		</view>
		
		<!-- 弹框 -->
		<u-popup :show="show" mode="center" width="700rpx" height="600px" @close="show=false">
			<view class="pop">
				<view class="pop-replay" v-if="replayUser">
					回复：{{ replayUser }}
				</view>
				<view class="pop-replay" v-else>
					发布评论
				</view>
				<view class="replaysContent">
					<u--textarea :confirmType="null" style="margin-bottom: 20rpx; height: 180rpx;"
						v-model="replayInfo" placeholder="请输入内容" />
				</view>
				<!-- 回复按钮 -->
				<view class="replay">
					<u-button class="btn" color="#0480FB" type="primary" style="border-radius: 114rpx;"
						@click="addReplay" size="mini" :text="replayUser ? '回复' : '评论'"></u-button>
				</view>
			</view>
		</u-popup>
		
		<view class="downLine" v-if="downLineShow">
			<text>附件下载中，请稍等</text>
			<progress :percent="percent" font-size='24rpx' border-radius='44rpx' activeColor='#D52424' show-info stroke-width="10"></progress>
		</view>
	</view>
</template>

<script>
	import policiesApi from '@/api/socialized-servce/policies-regulation/index.js'
	import config from '@/config/baseUrl'
	import {
		yearTimetwo
	} from '@/plugins/gettime.js';
	export default {
		data() {
			return {
				policyTypeName: '',
				article: {},
				hasSigned: false,
				signing: false,
				communicationList: [],
				show: false,
				replayInfo: '',
				replayUser: '',
				downLineShow: false,
				percent: 0
			}
		},
		onPullDownRefresh() {
			this.param = { page: 1, size: 5, total: 0 }
			this.loadDataList()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onLoad(e) {
			this.id = e.id
			this.policyTypeName = decodeURIComponent(e.policyTypeName)
		},
		onShow() {
			this.loadArticle()
		},
		methods: {
			addReplay() {
				// this.$message.closeAll()
				if (!this.replayInfo) {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					});
					return
				}
				policiesApi.commentOpinion({
					policyOpinionId: this.article.policyOpinionId,
					content: this.replayInfo,
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '发布成功',
							icon: 'none'
						});
						this.queryComment()
						this.replayInfo = ''
						this.show = false
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
			queryComment() {
			  policiesApi.queryCommentOpinion(this.article.policyOpinionId).then(res => {
				this.communicationList = res.data
			  })
			},
			toReplay(user) {
				this.replayUser = user || ''
				this.show = true
			},
			loadArticle() {
				policiesApi.queryByIdOpinion({
					id: this.id
				}).then(res => {
					this.article = res.data
					this.queryComment()
					// this.hasSigned = res.data.userThumpUp == 1
				})
			},
			// 设置顶部高度
			setmargintop() {
				let top = 0
				top = this.customBar + 10
				return top
			},
			//  设置内容高度
			setcollapseheight() {
				let topheightone = uni.upx2px(260)
				let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
				  success: function(res) {
					winHeight = res.windowHeight
				  }
				});
				winHeight = parseInt(winHeight) - newheight
				// #ifndef H5
				winHeight = winHeight - 10
				// #endif
				return winHeight
			},
			//返回上一步
			back() {
				uni.navigateBack({ delta: 1 })
			},
			download(row) {
				if (this.downLineShow) {
					return
				}
				this.downLineShow = true
				let fileType = row.fileName.split('.')[1]
				const task = uni.downloadFile({
					url: config.agrServiceUrl + 'common/file/upDown/download?fileId=' + row.fileId + '&moduleType=XG_ORGANIZATION&upDownType=FTP',
					fileType,
					success: function(res) {
						if (res.statusCode === 200) {
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								fileType,
								success: function(res) {
									this.downLineShow = false
									console.log('文件已保存到', res.savedFilePath)
									uni.openDocument({
										showMenu: true,
										fileType,
										filePath: res.savedFilePath
									});
								}
							})
						}
					},
					fail: err => {
						console.log(err)
					},
					complete: com => {
						console.log(com)
					},
				});
				task.onProgressUpdate(res => {
					// 更新进度条显示
					if (res.progress < 100) {
						this.percent = res.progress
					} else {
						this.downLineShow = false
					}
				});
				
				// // #ifdef APP-PLUS
				// const dtask = plus.downloader.createDownload( config.agrServiceUrl + 'common/file/upDown/download?fileId=' + row.fileId, {}, function ( d, status ) {    
				// 	if ( status == 200 ) { // 下载成功    
				// 		var path = (d.filename);    
				// 		// 安装下载的apk文件  
				// 		plus.runtime.openFile(path);  
				// 	} else {//下载失败    
				// 		alert( "Download failed: " + status );     
				// 	}      
				// });    
				// uni.showModal({
				// 	title:'版本更新',  
				// 	content:'app有新版更新，获取更好应用体验请点击下载更新',  
				// 	confirmText:'下载',  
				// 	success: (res) => {  
				// 		if(res.confirm) {  
				// 			dtask.start();   
				// 			let prg = 0;  
				// 			let showLoading = plus.nativeUI.showWaiting("正在下载");  
				// 			dtask.addEventListener('statechanged', function(task, status) {  
				// 				// 给下载任务设置一个监听 并根据状态  做操作  
				// 				switch (task.state) {  
				// 					case 1:  
				// 					  showLoading.setTitle("正在下载");  
				// 					  break;  
				// 					case 3:  
				// 					  prg = parseInt((parseFloat(task.downloadedSize) / parseFloat(row.fileSize)) * 100);  
				// 					  showLoading.setTitle("  正在下载" + prg + "%  ");  
				// 					  break;  
				// 					case 4:  
				// 					   plus.nativeUI.closeWaiting();  
				// 						//下载完成  
				// 					  break;  
				// 				}  
				// 			})  
				// 		}  
				// 	}  
				// })
				// // #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		font-size: 14px;
		line-height: 24px;

		.new-top-nav {
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 99;
		}
		
		.new-header {
			width: 100%;
			min-height: 150rpx;
			margin: -20rpx 0 20rpx;
			
			.line {
				border-bottom: 1px solid #ddd;
				display: flex;
				
				.one {
					border-right: 1px solid #ddd;
					flex: 1;
					text-align: center;
					width: 20%;
					display: flex;
					justify-content: center;
					align-items: center;
					min-height: 70rpx;
					line-height: 36rpx;
					
					&:nth-child(2n) {
						flex: 2;
						width: 30%;
					}
					
					&:last-child {
						border-right: none;
					}
				}
			}
		}
		
		.contain-view {
			margin: 0 30rpx;
			padding: 20rpx 30rpx;
			position: relative;
			background-color: #fff;
			border-radius: 16rpx;
			box-sizing: border-box;
			overflow: auto;
			
			.title {
				font-size: 20px;
				font-weight: bold;
				// text-align: center;
				margin-bottom: 20rpx;
				color: #817539;
							
				&::before {
					display: inline-block;
					content: '';
					background-color: #817539;
					width: 5px;
					height: 32rpx;
					position: absolute;
					left: 0;
					top: 26rpx;
				}
			}
			
			.poster {
				color: #707273;
				// margin-top: 20rpx;
				padding: 10rpx 0;
				border-bottom: 1px solid #d3e6f9;
				.post {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.co {
				color: #707273;
				margin-top: 10rpx;
			}
			.content {
				margin-top: 20rpx;
				// height: calc(100% - 260rpx);
				overflow: auto;
				
				::v-deep img {
					display: block;
					max-width: 100%;
				}
				::v-deep .ql-video {
					display: block;
					max-width: 100%;
				}
			}
			.fileBox {
				margin: 30rpx 0;
				.fileTitle {
					margin-bottom: 10rpx;
				}
				.fileContent {
					margin-left: 20rpx;
					.fileOne {
						color: #169BD5;
						cursor: pointer;
					}
				}
			}
			.num {
				margin: 10rpx 0;
				.eyeicon {
					vertical-align: middle;
					margin-right: 10rpx;
				}
			}
			.publish {
				padding: 30rpx 0;
				background: #FFFFFF;
				border-top: 1px solid #eee;

				.publishuser {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 20rpx;
					font-size: 28rpx;
					font-family: Arial-Regular, Arial;
					font-weight: 400;
					color: #606060;

					.left {
						display: flex;
						align-items: center;

						.icon {
							width: 26rpx;
							height: 28rpx;
							margin-right: 10rpx;
						
							image {
								width: 100%;
								height: 100%;
								vertical-align: top;
							}
						}
					}
				}

				.publishcontent {
					margin: 20rpx 0;
					padding: 0 80rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #606060;
				}
				
				.sub-publishuser {
					margin-left: 36rpx;
					border: 1px solid #eee;
					
					.publish {
						padding: 20rpx 0;
						
						&:first-child {
							border-top: none;
						}
						
						.publishuser {
							font-size: 24rpx;
						
							.name {
								vertical-align: middle;
									
								.to {
									display: inline-block;
									margin-right: 8rpx;
								}
								.replay {
									display: inline-block;
									color: blue;
								}
							}
						}
						
						.publishcontent {
							margin: 8rpx 0 0 0;
							font-size: 24rpx;
						}
					}
				}
			}
		}
		
		.sign {
			height: 100rpx;
			margin-top: 50rpx;
			text-align: center;
			.img {
				width: 100rpx;
				height: 100%;
			}
		}

		.pop {
			width: 600rpx;
			padding: 20rpx;
			
			.pop-replay {
				margin-bottom: 6rpx;
			}
		}
		&>.replay {
			margin: 26rpx 30rpx 0;
		}
		.downLine {
			width: calc(80% - 40rpx);
			position: fixed;
			top: 45%;
			left: 10%;
			padding: 0 20rpx;
			background-color: #ccc;
			text-align: center;
		}
	}
	
</style>
